<template>
	<!-- 酒店主页 -->
	<view class="hotel_home">
		<!-- 顶部 -->
		<view class="header">
			<view class="header_felx">
				<view class="city" @tap="changeCity">
					<text class="city_text">{{ city||'暂无' }}</text>
					<image class="city_icon" src="/static/icon/arrows.png"></image>
				</view>
				<view class="salutatory"><image class="salutatory_img" src="/static/bg/top-help.png"></image></view>
				<view class="signing"><image @tap="signing" class="signing_img" src="/static/icon/signing.png"></image></view>
			</view>
		</view>
		<mescroll-uni :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @init="mescrollInit" @emptyclick="emptyClick" @topclick="topClick">
			<!-- 轮播图 -->
			<view class="slide">
				<swiper class="slide_swiper" indicator-dots="true" indicator-color="#b9e2f7" indicator-active-color="#ffffff" autoplay interval="2000" circular="true">
					<swiper-item v-for="(item, index) in banner" :key="index" @tap="slide_swiper_item(index)"><image :src="item"></image></swiper-item>
				</swiper>
			</view>

			<!-- 公告 -->
			<view class="notice">
				<view class="common">
					<view class="notice_icon"><image src="/static/icon/trumpet.png"></image></view>
					<swiper class="notice_swiper" vertical="true" autoplay interval="3000" circular="true">
						<swiper-item class="notice_swiper_item" v-for="(item, index) in broadList" :key="index">
							<text class="notice_swiper_title">广播</text>
							<text class="notice_swiper_content">{{ item }}</text>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<!-- 我要认证 -->
			<view class="attestation" @tap="navto()" v-if="flag"><image src="/static/bg/gohotel.png" mode=""></image></view>

			<!-- 服务员入驻 -->
			<view class="joins">
				<view class="common">
					<view class="joins_title">
						<view class="icon"></view>
						<view class="title">服务员入驻</view>
					</view>
					<view class="joins_box">
						<view class="content_left">
							<view>
								<view class="blue">{{cleanStaff.hotelCount||0}}</view>
								<view>全国累计入驻保洁员(名）</view>
							</view>
						</view>
						<view class="content_right">
							<view class="box1_right_item">
								<view>附近保洁员(名)</view>
								<view class="blue">0</view>
							</view>
							<view class="box1_right_item">
								<view>五星保洁员(名)</view>
								<view class="blue">0</view>
							</view>
							<view class="box1_right_item">
								<view>四星保洁员(名)</view>
								<view class="blue">0</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 酒店活跃热榜 -->
			<view class="hotelActive">
				<view class="common">
					<view class="hotelActive_title">
						<view class="icon"></view>
						<view class="title">酒店活跃热榜</view>
					</view>
					<scroll-view scroll-x="true" class="scroll">
						<view class="scroll_item" @tap="hotel(item)" v-for="(item, index) in hotHotel" :key="index">
							<view class="item_img"><image :src="item.hotel_images[0] + '?imageView2/1/w/500/h/668'"></image></view>
							<view class="item_content">
								<view class="item_title">{{ item.name }}</view>
								<view class="item_text">完成{{ item.order_count }}单</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<!--  -->
			<view class="advertising">
				<image class="image1" @tap="trainer" src="/static/bg/professional_.png"></image>
				<image class="image2" @tap="standard" src="/static/bg/service-process_.png"></image>
			</view>

			<!-- 保洁达人 -->
			<view class="cleanser">
				<view class="common">
					<view class="cleanser_title">
						<view class="icon"></view>
						<view class="title">保洁达人</view>
					</view>
					<scroll-view scroll-x="true" class="cleanser_scroll">
						<view class="cleanser_item" v-for="(item, index) in cleanSage" :key="index">
							<image class="item_img" :src="item.head_images || '/static/bg/img.png'" @tap="cleaner(item)"></image>
							<view class="item_text">{{ item.name }}</view>
							<view class="item_attention" @tap="attention(item)">关注</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<!-- 为您推荐 -->
			<view class="recommend">
				<view class="common">
					<view class="recommend_title">
						<view class="icon"></view>
						<view class="title">为你推荐</view>
					</view>
					<view class="recommend_main">
						<view class="recommend_item" @tap="cleaner(item)" v-for="(item, index) in recClean" :key="index">
							<view class="item_left"><image class="left_img" :src="item.head_images || '/static/bg/img.png'"></image></view>
							<view class="item_content">
								<view class="content_top">
									<view class="top_text">{{ item.name }}</view>
									<view v-if="item.evaluate.clean_grade"><uni-rate max="5" size="16" :value="item.evaluate.clean_grade" disabled="true"></uni-rate></view>
								</view>
								<view class="content_content">
									<view class="label" v-if="item.evaluate.clean_tag.length>1" v-for="(val,i) in item.evaluate.clean_tag" :key="i">{{val.tag_name||'暂无评价'}}</view>
									<view class="label" v-if="!(item.evaluate.clean_tag.length>1)">暂无评价</view>
								</view>
								<view class="content_bottom">
									<view class="text">已完成 {{ item.order_count }} 个客房订单</view>
									<view class="address">{{item.address||'暂无地址'}}</view>
								</view>
							</view>	
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
		<!-- add -->
		<view class="add"><image src="/static/bg/add.png" @tap="add"></image></view>
	</view>
</template>

<script>
import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
import uniRate from '@/components/uni-rate/uni-rate.vue';
export default {
	components: {
		MescrollUni,uniRate
	},
	data() {
		return {
			broadList: [],
			hotHotel: [],
			cleanSage: [],
			recClean: [],
			cleanStaff:{},
			lunbo: 0,
			banner: ['/static/bg/hotel1.png'],
			flag: false,
			mescroll: null, //mescroll实例对象
			downOption: {
				use: true, // 是否启用下拉刷新; 默认true
				auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				autoShowLoading: true, // 如果设置auto=true(在初始化完毕之后自动执行下拉刷新的回调),那么是否显示下拉刷新的进度; 默认false
				isLock: false, // 是否锁定下拉刷新,默认false;
				isBoth: true, // 下拉刷新时,如果滑动到列表底部是否可以同时触发上拉加载;默认true,两者可同时触发;
				offset: 60, // 在列表顶部,下拉大于80upx,松手即可触发下拉刷新的回调
				inOffsetRate: 1, // 在列表顶部,下拉的距离小于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
				outOffsetRate: 0.2, // 在列表顶部,下拉的距离大于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
				bottomOffset: 20, // 当手指touchmove位置在距离body底部20upx范围内的时候结束上拉刷新,避免Webview嵌套导致touchend事件不执行
				minAngle: 45, // 向下滑动最少偏移的角度,取值区间  [0,90];默认45度,即向下滑动的角度大于45度则触发下拉;而小于45度,将不触发下拉,避免与左右滑动的轮播等组件冲突;
				textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
				textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
				textLoading: '正在刷新...' // 加载中的提示文本
			},
			upOption: {
				use: true, // 是否启用上拉加载; 默认true
				auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				isLock: false, // 是否锁定上拉加载,默认false;
				isBoth: true, // 上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认true,两者可同时触发;
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10, // 每页数据的数量
					time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
				},
				noMoreSize: 3, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
				textLoading: '加载中 ...', // 加载中的提示文本
				textNoMore: '-- END --', // 没有更多数据的提示文本
				toTop: {
					// 回到顶部按钮,需配置src才显示
					src: 'http://www.mescroll.com/img/mescroll-totop.png', // 图片路径
					offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000
					duration: 300 // 回到顶部的动画时长,默认300ms
				},
				empty: {
					use: true, // 是否显示空布局
					icon: 'http://www.mescroll.com/img/mescroll-empty.png', // 图标路径
					tip: '~ 暂无相关数据 ~', // 提示
					btnText: '去逛逛 >', // 按钮
					fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效
					top: '35%', // fixed定位的top值 (完整的单位值,如 "35%"; "300upx")
					zIndex: 99 // fixed定位z-index值
				}
			}
		};
	},
	created() {
		this.intile();
	},
	methods: {
		intile(callback) {
			let lat = 34.22259;
			let lng = 108.94878;
			uni.getLocation({
				type: 'wgs84',
				geocode: true
			}).then(data=>{
				let [err,res] = data;
				if(err){
					this.showToast('请打开定位后，重试！！');
				}else{
					lat = res.latitude;
					lng = res.longitude;
					// #ifdef APP-PLUS
					this.$store.state.city = res.address.city
					// #endif
				}
				return this.getReq({
					url: 'both/hotelHomePage',
					data: {
						id: this.isLogin().hotel_id,
						lat: lat,
						lng: lng
					}
				});
			}).then(data=>{
				let [err,res] = data;
				if(err || res.data.status == 0){
					this.showToast('服务器繁忙，请稍后重试！！！');
				}
				let info = res.data.data;
				if (info.auth == 0 || info.auth == 3) {
					this.flag = true;
				}else{
					this.flag = false;
				}
				this.auth = info.auth;
				this.broadList = info.broadList;
				this.hotHotel = info.hotHotel;
				this.cleanSage = info.cleanSage;
				this.cleanStaff = info.cleanStaff
				this.recClean = info.recClean;
				this.banner = info.lunbo
				if (callback) callback();
			});
		},
		navto() {
			/**
			 * 认证
			 */
			if (this.auth == 2) {
				uni.navigateTo({
					url: '/pages/user/auditor'
				});
				return;
			}
			uni.navigateTo({
				url: '/pages/user/set/enterprise'
			});
		},
		cleaner(e) {
			/**
			 * 进入保洁详情
			 */
			uni.navigateTo({
				url: '/pages/hotel/cleaner/cleaner?id=' + e.id
			});
		},
		standard() {
			/**
			 * 服务流程
			 */
			uni.navigateTo({
				url: '/pages/hotel/service/standard'
			});
		},
		trainer() {
			/**
			 * 服务保障
			 */
			uni.navigateTo({
				url: '/pages/hotel/service/trainer'
			});
		},
		attention(e) {
			/**
			 * 关注
			 */
			if (!this.isLogin().hotel_id) {
				this.showToast('请先酒店认证');
			}
			this.getReq({
				url: 'both/listSetup',
				method: 'POST',
				data: {
					host_id: this.isLogin().hotel_id,
					guest_id: e.id,
					setup_type: 1,
					app_type: 2
				}
			}).then(v => {
				if (v[1].data.status == 1) {
					this.showToast('已关注');
					return;
				}
				if (v[1].data.status == 0) {
					this.showToast('您已关注');
					return;
				}
				this.showToast('请稍后重试');
			});
		},
		hotel(e) {
			/**
			 * 进入酒店详情
			 */
			uni.navigateTo({
				url: '/pages/cleaner/hotel/hotel?id=' + e.id
			});
		},
		slide_swiper_item(e) {
			/**
			 * 轮播图
			 */
		},
		changeCity() {
			/**
			 * 选择城市功能
			 */
			// uni.navigateTo({
			// 	url: '/pages/city/city'
			// });
		},
		signing() {
			/**
			 * 签到
			 */
			this.req(
				{
					url: 'both/addMyPoints',
					method: 'POST',
					data: {
						id: this.isLogin().id,
						position: '1',
						change_type: 'signin'
					}
				},
				res => {
					if (res.data.status == 1) {
						uni.showToast({
							title: res.data.title,
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						});
					}
				}
			);
		},
		add() {
			/**
			 * 预约房间
			 */
			if (this.auth == 0 || this.auth == 3) {
				this.showToast('请认证酒店后预约订单');
				return;
			}
			if (this.auth == 1) {
				uni.navigateTo({
					url: '/pages/hotel/order/order-room'
				});
				return;
			}
			if (this.auth == 2) {
				this.showToast('酒店认证审核中...');
				return;
			}
		},
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		downCallback(mescroll) {
			// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
			// loadSwiper();
			// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
			mescroll.resetUpScroll();
			this.intile(() => {
				mescroll.endSuccess(10);
			});
		},
		upCallback(mescroll) {},
		emptyClick() {
			uni.showToast({
				title: '点击了按钮'
			});
		},
		// 点击回到顶部按钮的回调
		topClick() {
			console.log('点击了回到顶部按钮');
		}
	},
	computed: {
		city() {
			let city = '';
			if(typeof this.$store.state.city == 'string'){
				city = this.$store.state.city
			}else if(typeof this.$store.state.city == 'object'){
				city = this.$store.state.city.SHORT_NAME
			}else{
				city = '暂无'
			}
			return city
		}
	}
};
</script>

<style lang="scss" scoped>
.hotel_home {
	color: #333333;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;

	.header {
		height: 62upx;
		width: 100%;

		.header_felx:after {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1upx;
			content: '';
			background: rgb(229, 229, 229);
			transform: scaleY(0.5);
		}

		.header_felx {
			height: 62upx;
			width: 702upx;
			padding: 0 24upx;
			position: fixed;
			top: 0;
			/* #ifdef APP-PLUS */
			top: var(--status-bar-height);
			/* #endif */
			left: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: white;
			z-index: 5;

			.city {
				.city_text {
					font-size: 28upx;
				}

				.city_icon {
					margin-left: 6upx;
					width: 16upx;
					height: 8upx;
					transform: translate(0, -4upx);
				}
			}

			.salutatory {
				.salutatory_img {
					width: 221upx;
					height: 32upx;
					margin-top: 20upx;
				}
			}

			.signing {
				.signing_img {
					width: 40upx;
					height: 40upx;
					transform: translate(0, 6upx);
				}
			}
		}
	}

	.slide {
		width: 100%;
		height: 350upx;
		margin-top: 0;

		.slide_swiper {
			width: 100%;
			height: 350upx;

			image {
				height: 350upx;
				width: 100%;
			}
		}
	}

	.notice {
		background-color: #ffffff;
		padding: 20upx 24upx;
		width: 702upx;

		.common {
			height: 50upx;
			background-color: #e5edfe;
			display: flex;

			.notice_icon {
				image {
					width: 33upx;
					height: 30upx;
					margin-left: 24upx;
				}
			}

			.notice_swiper {
				width: 640upx;
				height: 50upx;

				.notice_swiper_item {
					font-size: 24upx;
					line-height: 50upx;
					margin-left: 8upx;
					z-index: -99;

					.notice_swiper_title {
						margin-left: 10upx;
					}

					.notice_swiper_content {
						margin-left: 20upx;
					}
				}
			}
		}
	}

	.attestation {
		width: 750upx;
		height: 174upx;

		image {
			width: 750upx;
			height: 174upx;
		}
	}

	.joins {
		line-height: 1;
		.common {
			width: 702upx;
			padding: 0 24upx;

			.joins_title {
				font-size: 36upx;
				padding: 30upx 0;
				display: flex;
				align-items: center;
				font-weight: bold;
				.icon {
					width: 10upx;
					height: 34upx;
					margin-right: 20upx;
					background-color: #3595f9;
					border-radius: 2upx;
				}
				.title {
					font-size: 36upx;
				}
			}

			.joins_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 702upx;
				height: 310upx;
				font-size: 24upx;
				color: #999999;

				.content_left {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 340upx;
					height: 310upx;
					background-color: #ffffff;
					box-shadow: 0upx 3upx 15upx 0upx rgba(0, 0, 0, 0.09);
					border-radius: 8upx;
					text-align: center;
					.blue {
						font-size: 72upx;
						margin-bottom: 24upx;
						color: #3595f9;
					}
				}

				.content_right {
					width: 340upx;
					height: 310upx;

					.box1_right_item:nth-child(1) {
						margin-top: 0;
					}

					.box1_right_item {
						padding: 0 24upx;
						height: 90upx;
						margin-top: 20upx;
						background-color: #ffffff;
						box-shadow: 0px 3upx 15upx 0px rgba(0, 0, 0, 0.09);
						border-radius: 8upx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.blue {
							font-size: 40upx;
							color: #3595f9;
						}
					}
				}
			}
		}
	}

	.hotelActive {
		.common {
			width: 100%;
			height: 612upx;
			white-space: nowrap;

			.hotelActive_title {
				font-size: 36upx;
				padding: 50upx 24upx 30upx 24upx;
				display: flex;
				align-items: center;
				font-weight: bold;
				.icon {
					width: 10upx;
					height: 34upx;
					margin-right: 20upx;
					background-color: #3595f9;
					border-radius: 2upx;
				}
				.title {
					font-size: 36upx;
				}
			}

			.scroll {
				width: 100%;
				height: 484upx;
				background-color: #fff;

				.scroll_item {
					width: 100%;
					height: 484upx;
					width: 250upx;
					margin-left: 24upx;
					display: inline-block;

					.item_img {
						width: 250upx;
						height: 334upx;
						image {
							width: 250upx;
							height: 334upx;
							box-shadow: 0upx 7upx 15upx 0upx rgba(0, 0, 0, 0.25);
							border-radius: 8upx;
						}
					}

					.item_content {
						padding: 30upx 0;
						.item_title {
							width: 250upx;
							font-size: 32upx;
							font-weight: bold;
							line-height: 1;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}

						.item_text {
							font-size: 24upx;
							line-height: 64upx;
							color: #999999;
						}
					}
				}
			}
		}
	}

	.advertising {
		padding: 0 24upx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.image1 {
			width: 340upx;
			height: 220upx;
			box-shadow: 6upx 12upx 50upx 2upx rgba(251, 189, 8, 0.45);
		}

		.image2 {
			width: 340upx;
			height: 220upx;
			box-shadow: 6upx 12upx 50upx 2upx rgba(0, 129, 255, 0.45);
		}
	}

	.cleanser {
		.common {
			width: 750upx;
			height: 440upx;
			white-space: nowrap;
			.cleanser_title {
				font-size: 36upx;
				padding: 50upx 24upx 30upx 24upx;
				display: flex;
				font-weight: bold;
				align-items: center;
				.icon {
					width: 10upx;
					height: 34upx;
					margin-right: 20upx;
					background-color: #3595f9;
					border-radius: 2upx;
				}
				.title {
					font-size: 36upx;
				}
			}

			.cleanser_scroll {
				width: 750upx;
				height: 316upx;

				.cleanser_item {
					display: inline-block;
					transform: translate(0, 4upx);
					margin-left: 24upx;
					width: 200upx;
					height: 306upx;
					background-color: #ffffff;
					box-shadow: 0upx 2upx 15upx 0upx rgba(0, 0, 0, 0.12);
					border-radius: 8upx;
					text-align: center;
					z-index: 99;

					.item_img {
						margin-top: 32upx;
						width: 130upx;
						height: 130upx;
						border-radius: 50%;
					}

					.item_text {
						font-size: 28upx;
						height: 58upx;
						line-height: 58upx;
					}

					.item_attention {
						width: 120upx;
						height: 50upx;
						background-color: #3595f9;
						border-radius: 25upx;
						font-size: 24upx;
						color: #ffffff;
						line-height: 50upx;
						margin: 0 auto;
					}
				}
			}
		}
	}

	.recommend {
		margin-bottom: 80upx;

		.common {
			width: 702upx;
			padding: 0 24upx;

			.recommend_title {
				font-size: 36upx;
				padding-top: 50upx;
				display: flex;
				font-weight: bold;
				align-items: center;
				.icon {
					width: 10upx;
					height: 34upx;
					margin-right: 20upx;
					background-color: #3595f9;
					border-radius: 2upx;
				}
				.title {
					font-size: 36upx;
				}
			}

			.recommend_main {
				.recommend_item:nth-last-child(1) {
					border-bottom: none;
				}

				.recommend_item {
					width: 702upx;
					height: 180upx;
					border-bottom: 1upx solid #e5e5e5;
					display: flex;
					align-items: center;

					.item_left {
						width: 150upx;
						height: 150upx;
						border-radius: 50%;
						display: flex;
						align-items: center;

						.left_img {
							width: 120upx;
							height: 120upx;
							border-radius: 50%;
						}
					}

					.item_content {
						width: 552upx;
						.content_top {
							display: flex;
							justify-content: space-between;
							align-items: center;
							height: 32upx;
							line-height: 1;

							.top_text {
								font-size: 32upx;
								line-height: 1;
								color: #111111;
							}
						}

						.content_content {
							height: 68upx;
							line-height: 68upx;
							font-size: 20upx;
							line-height: 34upx;
							text-align: center;
							display: flex;

							.label {
								height: 34upx;
								padding: 0 8upx;
								border-radius: 8upx;
								margin: 17upx 18upx 0 0;
								background-color: #f6f6f6;
								color: #999;
							}
						}

						.content_bottom {
							font-size: 24upx;
							line-height: 24upx;
							color: #999;
							display: flex;
							align-items: center;
							justify-content: space-between;
							.address{
								width: 300upx;
								white-space:nowrap;
								text-overflow:ellipsis;
								overflow:hidden;
								text-align: right;
							}
						}
					}
				}
			}
		}
	}

	.add {
		position: fixed;
		right: 40upx;
		top: 65%;
		width: 110upx;
		height: 110upx;
		background-color: #3595f9;
		box-shadow: 0upx 6upx 24upx 0upx rgba(53, 149, 249, 0.78);
		border-radius: 50%;

		image {
			width: 110upx;
			height: 110upx;
			box-shadow: 0px 6px 24px 0px rgba(53, 149, 249, 0.5);
			border-radius: 50%;
		}
	}
}

.btn {
	display: flex;
}
</style>
